*{
    box-sizing: border-box;
}
body{
    margin: 0;
    overflow:hidden;
    /* overflow-y: scroll; */
}


.pagein-enter{
transform: translate(100%,0);
}
.pagein-enter-active{
    transition: all 0.7s;
      position: absolute;  
      width: 100%; 
      z-index: 10;  
      top:0;
}
.pagein-leave-active{
    transition: all 0.7s;
    position: absolute;
     width: 100%; 
}
.pagein-enter-to,.pagein-leave{
    transform: translate(0,0);
}
.pagein-leave-to{
    transform: translate(-100%,0);
}



.pageout-enter{
    transform: translate(-100%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.7s;
     position: absolute; 
     width: 100%; 
}
.pageout-leave-active{
     z-index: 10; 
}
.pageout-enter-to,.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(100%,0);
}